<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <!--  -->
        <p class="p1">这是一个p标签1</p>
        <p class="p2">这是一个p标签2</p>
        <!--  -->
        <p class="p3">这是一个p标签3</p>
    </div>
</body>
<script>
    let element = document.createElement('h3')
    element.innerHTML = "这是我们创建的一个新节点"
    let div = document.querySelector('div')
    div.appendChild(element)
    let new_node = document.createElement('p')
    new_node.innerHTML = "这是一个新p标签"
    div.insertBefore(new_node, document.querySelector('.p1'))
    div.insertBefore(new_node, document.querySelector('.p2'))
    div.insertBefore(new_node, document.querySelector('.p3'))
    element.innerHTML = "我正在修改p标签的内容"
    console.log(div.removeChild(element))
    // div.appendChild(element)
    // div.insertBefore(new_node, null)
</script>
</html>